How to create a Web push notification?

Web push notifications allow you to reach contacts in a completely new way. They will display your notification using the browser of a person that agreed to the notifications. That person doesn’t need to be a subscriber to receive them.

Push notifications are a free feature that can influence your conversions, but also inform people about news on your pages, alert them or remind them about your site. It allows you to reach more people and display notifications that can redirect to a site of your choice.

With GetResponse you can now create Rich push notifications which let you create notifications containing images, add action buttons, and support topics. The appearance of the notification may differ from the preview depending on the recipient’s browser and the recipient’s operating system (and the fact that different browsers/OS’ support different rich push elements).

You can also generate the title and notification text with ArtificiaI Intelligence.

Introduction to Web push notifications

Web push notifications are notifications that can be sent to a user via desktop web browser and mobile web browser. Web push notifications are delivered to a user’s desktop or mobile screen anytime they have their browser open — regardless of whether the user is on the website.

How does Web Push work?

When the visitor clicks on Allow notifications, our application sends a request to the appropriate intermediary (called a push service), which delivers the message to the browser, if it is online. If the browser is offline, the message is queued until the browser is opened. Click here for more information.

• You have to create a site in GetResponse that will contain your notifications, as well as the URL and the image.
• You have to install a WebConnect Integration script on your website and a service worker on your website server.
• We support all the main browsers apart from Safari and Internet Explorer 11.
• We highly recommend creating a custom prompt before the native browser permission prompt is displayed. It will inform your visitors that you can send them notifications if they agree. It increases your conversion rate and also, some browsers may block the native browser prompt if there was no previous interaction with the website. Also, custom prompt can increase subscriptions to your notifications.

Custom prompt:

Native prompt:

Adding a site

To add a site:

1. Go to Tools > Push notifications.
2. Click Add site.
   
3. Provide a name for your site (up to 150 characters).
4. Provide your exact website URL. This must be the exact URL that appears in the browser. Your site must support HTTPS to send notifications. If it doesn’t, you’ll need to set up an SSL certificate for your website.
5. (Optional) Click Upload an image if you want to add an icon. That would be a default image displayed in all your notifications and custom prompts. It can be your logo or a brand icon.
6. Click Add site and continue.

You can add only a domain or subdomain as your site, for example:

• https://example.com
• https://subdomain.example.com

It’s not possible to use a directory as your site, such as:

• https://example.com/directory
• https://subdomain.example.com/directory

The second step is to configure your website.

1. Click Get Web Connect to copy the tracking code. Add the tracking code to the site where you want to display notifications. It needs to be placed in the head section.
2. Click Download service worker file to download the service worker. Install it in the root directory of your site on your server. Ask your web developer for help if you’re not comfortable doing it yourself.
   When people opt-in, the service worker will be downloaded to their browser. If they subscribe, then they’ll be able to get your notifications. Things to keep in mind:
   • You need to have HTTPS to deploy the service worker.
   • Don’t rename the file.
   • The file must point to the same site origin (your domain).

3. Click Finish to complete setting up your site.

In the third step you can Pick opt-in method. Two-click opt-in (with custom prompts) will result in better conversions. That can be changed later in the Prompt paths.

• With One-click opt-in only the native browser prompt will appear.
• Two-click opt-in gives you the option to create a custom branded prompt that shows before the native browser prompt.
  
  

Managing a site

To manage your site:

1. Go to Web push notifications.
2. Hover over the Actions menu (vertical ellipsis).
   There you can:
   • Edit your site
   • Get code and service worker
   • Create prompt
   • Create notification
   • Remove (it’s only possible if there are no active notifications).

On that screen, you will also see how many people are subscribed to notifications on that website.

Creating a prompt

When creating a prompt, you are in fact always creating a custom prompt. The native prompt is created automatically and cannot be edited, as it’s a request directly from the browser to send notifications.

Keep in mind that:

• It’s not possible to edit or remove the browser native prompt.
• You can preview how the prompt will appear. The prompt’s appearance can differ between browsers and operating systems.
• You’ll find it under Permission prompts, alongside any custom prompts you’ve created.

You can create a custom prompt for your website to increase subscribers and conversions.

To create a custom prompt:

1. Go to Web push notifications.
2. Hover over the Actions menu (vertical ellipsis) and select Create prompt.
   
   
3. Enter an internal name for your prompt (up to 150 characters).
4. Enter your prompt message (up to 128 characters). Create a personalized message to encourage people to subscribe. The custom prompt appears before the native prompt.
5. Provide the text for the confirmation button and choose its color.
6. Provide the text for the cancellation link and choose its color. A preview of your prompt will be displayed on the right side.
7. Click Save to finish setting up the custom prompt.
8. (Optional) Click on Preview to see how the native prompt will look like.
9. Click Save and activate to activate the created prompt (while disabling the currently active one) or Save progress to save your progress without activating the prompt.

You will be able to see how many people viewed your prompts and how many interacted with it. For native prompt, you will see how many people subscribed. For custom prompt, you will see how many people viewed the native prompt, which means how many people accepted the custom prompt. This will allow you to compare the effectiveness of different prompts. You will also be able to check how many visitors subscribed through a given custom prompt.

Managing prompts

To manage your prompts:

1. Go to Web push notifications.
2. Click on the name of your site.
3. On the Permission prompts tab, you can deactivate the prompt.
4. To manage the prompt, hover over the actions menu (vertical ellipsis) next to your custom prompt. There you will be able to:
   • Edit your prompt.
   • Delete it (it’s only possible if prompt has not been displayed).

Controling where your prompts will appear

You can control where your prompts will appear using Prompt paths.

Prompth paths are designed to display the prompt throughout the site or choose specific pages by adding a prompt path. The path refers to the URL part after the domain. For example, in “https://www.example.com/store/sale”, the path is “/store/sale”.

1. Go to Web push notifications.
2. Click on the name of your site.
3. Click on the Prompt paths tab.
4. Click Edit paths to edit all paths.
5. Hover over 3 dots beside your path to delete it, or to add a path above or below it.
   
   
   
6. When adding the path, you need to:
   • Select the Prompt
   • Enter the Prompt path, you have three types to choose from:
     • Path starts with – enter the first part of URL displayed after your website’s URL – so if it is: https://www.example.com/store/, you enter /store and the prompt will show on all sites starting with https://www.example.com/store/
     • Path excludes – enter the part of URL path that you would like to exclude from showing a prompt
     • Entire site – select that if you want to show selected prompt on your entire website – selecting that will hide all prompts with lower priority selected with Path starts with
7. Decide about order sequence of your prompt paths by moving them up and down using the triple bar icon on their left hand side.
   
   
   
   
8. Save your changes by clicking Save Paths.

You can specify the order in prompt paths to determine which rule should have priority, because the rules may overlap and block each other.

Creating notification

Notification is a window that is displayed right on your subscribers’ desktops and mobile screens. They can notify people who have opted-in to your notifications about what’s happening on your site. You can advertise a product launch, a sale, or inform them about new content.

Note: different browsers and devices might have different character limits. If you want the notification to display good for all the subscribers, it’s best not to create too long notifications, as they might not be displayed fully.

You can create notifications manually or using AI.

To create a notification:

1. Go to Web push notifications.
2. Hover over the Actions menu (vertical ellipsis) and click on Create notification.
   
   
   
   
3. Provide an internal name for your notification (up to 150 characters).
   At this stage you can decide if you want to use AI (table below) or create one manually (skip to point 4.). Artificial Intelligence works with paid plans only.

4. Enter the notification title (up to 250 characters). Use a catchy phrase or your brand name.
5. (Optional) Add the notification text (up to 250 characters). Use it to share more details about the thing you’re promoting, inform your notification subscribers about changes, or notify them about running sales or new products.
6. (Optional) Provide the destination URL to which people will be redirected after they click on your notification.
   
   
   
   
7. (Optional) Upload an image to the notification. You can use: JPEG, .JPG, PNG, GIF, WEBP, ICO, CUR, BMP no bigger than 10 MB. We recommend using an image with a width-to-height ratio of 2:1.
8. (Optional) Upload an icon to the notification. You can use: .JPEG, .JPG, .PNG, .GIF, .WEBP, .ICO, .CUR, .BMP up to 10 MB. For best results, use a square image at least 196 x 196 px.
   
   
   
   
   
   
9. (Optional) Click Add button to create Action buttons for visitors to take specific actions from your notifications. Then enter the text that shows on the button, paste the URL that opens upon button click and the button icon that appears next to the button text.
   
   
10. On the right, you will be able to see the preview of your notification and test it in the browser. The preview will apply to the Google Chrome browser on macOS, Windows, and Android. For other browser and operating systems, there can be visual differences. The preview is purely informational, as there can be differences on particular devices.
    To test how the notification will work in your system, click Preview in browser. You will be prompted to agree to receiving notifications.
11. You will be able to preview your audience (how many people have subscribed to your notification).
12. You can decide if want to Send the notification immediately or Schedule it for later. When scheduling the notification, you can change the time zone to other than the default one in your account.
    Note: scheduled notification can also be used in the automation workflow.
13. You can click Cancel, Save draft to use the notification later on, Send notification, or Schedule notification.
    Note: to send the notification immediately, you need at least one permission to send notifications (one notification subscriber), but you don’t need one at this time to schedule notification for later.
14. (Optional) You can set notification topic. It works when you have multiple notifications with the same topic. An older notification that hasn’t been clicked will be replaced by a new notification with the same topic, however if a visitor is offline and has several messages queued for delivery with the same topic, they will only get the last one.
    
    You will be redirected to the Notification page. There you will be able to see the notification status, when the notification was created and sent, how many notifications were sent, delivered and clicked.

Managing notifications

To manage your notifications:

1. Go to Web push notifications.
2. Click on the name of your site.
3. On the Notifications tab, hover over the actions menu (vertical ellipsis) where you can:
   • View your notification
   • Duplicate it
   • Cancel (if scheduled)

To change the scheduled date and time of your notification you need to cancel it and schedule again.

For a notification that wasn’t sent or is a draft, you have the option to:

• Edit it,
• Delete it.